﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Comments Test Home Page</title>
    <link href="/Content/Demo.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jquery-1.7.1.js" type="text/javascript"></script>
    <script src="/Scripts/knockout-2.1.0.js" type="text/javascript"></script>

    <script type="text/javascript" src="/Scripts/demo2/get.js"></script>
    <script type="text/javascript" src="/Scripts/demo2/post.js"></script>
    <script type="text/javascript" src="/Scripts/demo2/delete.js"></script>   
</head>
<body>
    <nav>
        <div class="demo-navigation">
            <a href="demo1-simpleget.htm">&lt;&lt;&lt; Back</a> 
            | Demo 2 CRUD |
            <a href="demo3-paging.htm">On to Demo 3 - Paging &gt;&gt;&gt;</a>
        </div>
    </nav>
    <div id="content">
        <div id="article">
            <p>
                See, I told you that last demo would be simple.
            </p>
            <p>
                This demo allows the user to create and delete comments. When we 
                delete the comment, we use a proper HTTP DELETE request. Again, the 
                code is still very simple. Note that when we POST a comment, we handle 
                the proper 201 status code.
            </p>
        </div>
        <ul data-bind="template: {name: 'commentTemplate', foreach: comments}">
        </ul>
        <form id="newCommentForm">
        <fieldset>
            <legend>New Comment</legend>
            <label for="text">Comment</label>
            <textarea id="text" name="text" type="text"></textarea>
            <label for="author">Author</label>
            <input id="author" name="author" type="text" value="" />
            <label for="email">Email</label>
            <input id="email" name="email" type="text" value="" />
            <button type="submit">Submit</button>
        </fieldset>
        </form>
        <script id="commentTemplate" type="text/html">
            <li class="comment">
                <header>
                    <div class="info">
                        <img data-bind="attr: {src: GravatarUrl}" />
                        <strong><span data-bind="text: Author"></span></strong>
                    </div>
                    <div class="actions">
                        <a class="delete" data-bind="attr: { 'data-comment-id': ID }" href="#">Delete Id: <span data-bind="text: ID" /></a>
                    </div>
                </header>
                <div class="body">
                    <p data-bind="text: Text"></p>
            
                </div>
            </li>
        </script>
        <script type="text/javascript">
            viewModel = {
                comments: ko.observableArray([])
            };

            ko.applyBindings(viewModel);
        </script>
    </div>
</body>
</html>
